import React from 'react';
import {View,Text,ScrollView,StyleSheet,Dimensions,Image,TouchableOpacity,Modal   } from 'react-native';
import { ListItem ,Button,Avatar,Tile,Divider  } from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';
var _ = require('underscore');
const SCREEN_WIDTH = Dimensions.get('window').width;
const SCREEN_HEIGHT = Dimensions.get('window').height;
export default class TabBarIcon extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            modalVisible:false,
            images:[],
            imageIndex:0
        };
    }
    openCommentModal = ()=>{
        this.props.onComment(this.props.renderData);
    }
    renderImages = ()=>{
        let dynamic_img=this.props.renderData.dynamic_img;
        if(dynamic_img.length==0){
            return null ;
        }
        let allData = [];
        let width=(SCREEN_WIDTH-65)/3-5;
        if(dynamic_img.length==1 || dynamic_img.length==2 || dynamic_img.length==4){
            width=(SCREEN_WIDTH-65)/2-5;
        }
        else{
            //let width=(SCREEN_WIDTH-50)/3-5;
        }
        for(let i=0;i<dynamic_img.length;i++){
            allData.push(
                <TouchableOpacity key={i} activeOpacity={0.9} style={{width,height:width,margin:1}}
                    onPress={ ()=>
                        this.props.onImagePress(dynamic_img,i)
                    }
                >
                    <Image key={i} source={ {uri:dynamic_img[i].pic_url} } resizeMode='cover' style={{width,height:width}} />
                </TouchableOpacity>
            );
        }
        return allData;
    }
    render() {
        let {user_head,nick_name,content,create_time,praise_num,reply_num,dynamic_img} =this.props.renderData;
        return (
            <View style={styles.container}>

                <View style={styles.headerContainer} >
                    <Image source={ {uri: user_head} } style={styles.userhead} />
                </View>
                
                <View style={styles.contenContainer}>
                    <Text style={{fontSize: 20,fontWeight: 'bold',color:'#517fa4'}} >{nick_name}</Text>
                    <Text selectable={true} numberOfLines={5} style={{fontSize: 18, color:'#000',marginTop:10}}>{content}</Text>
                    <View style={{ flex: 1,backgroundColor:'#fff',flexDirection:'row',flexWrap:'wrap',marginTop:10}}>
                        {this.renderImages()}
                    </View>
                    
                    <View style={styles.footerContainer}>
                        <Icon.Button name="heart-o" backgroundColor="#00000000" color="#6e6e6e" onPress={()=>{}}>{praise_num}</Icon.Button>
                        <Icon.Button name="comment-o" style={{marginLeft:20}} backgroundColor="#00000000" color="#6e6e6e" onPress={this.openCommentModal}>{reply_num}</Icon.Button>

                        <View style={{flex: 1,}}></View>
                        <Text style={{marginRight:15,fontSize: 16,color:'#6e6e6e'}} >{create_time}</Text>
                    </View>
                    <Divider style={{ backgroundColor: '#000' }} />
                </View>

                
                
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
      flex: 1,
      flexDirection:'row',
      backgroundColor: '#fff',
      borderWidth:1,
      borderColor:'#eee'
    },
    userhead:{
        width: 38,
        height:38,
        resizeMode: 'contain',
        overflow:'hidden',
        borderRadius:19,
    },
    headerContainer: {
      width:45,
      height:45,
      marginLeft:15,
      marginTop:15,
      borderRadius:5,
      overflow:'hidden'
    },
    contenContainer: {
      flex: 1,
      marginLeft:5,
      marginTop:15,
      backgroundColor: '#fff',
      justifyContent:'flex-start',
      alignItems:'flex-start'
    },
    footerContainer: {
        flex: 1,
        height:50,
        backgroundColor: '#fff',
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center'
      },
  });